<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素内容操作【3个】</title>
		<!-- 01_元素内容操作：元素以及元素内容的部分
		        .html()---无参--功能：获取匹配元素中的第一个元素的内容
				       ---有参--功能：【设置】将匹配的元素集合中所有的元素替换为新内容
					特点：针对 内容+元素
				.val()---无参--功能：表单内元素[input、select]生效
				                    获取表单元素中的第一个元素的内容
				      ---有参--功能：【设置】表单内元素[input、select]生效
					                input元素直接显示value
						            select元素不是显示
									option元素中内容：用户显示
									option元素中valne值，必须当前select中
									必须当前select中，option元素value值
									直接赋值，打印select元素对象名称[object Object]
					特点：针对 表单内(form元素可以包裹)元素的内容
				.text()---无参--功能：获取匹配元素集合中所有元素的文本内容
				       ---有参--功能：【设置】获取匹配元素集合中所有元素的文本内容
					                 内容替换
					特点：元素中存在内容
		 -->
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>html()函数使用</h1>
		<button>按钮[针对html()函数--有参]</button>
		<span>Lorem1</span>
		<span>Lorem2</span>
		
		<h1>val()函数使用</h1>
		<button>按钮[针对val()函数--无参]</button>
		<input type="text" value="文本框真实数据"/>
		<input type="text" placeholder="输入框显示效果[提示]"/>
		
		<!-- html:按钮 | 下拉列表
		     jq:点击按钮，设置下拉列表的值 | html()与val()有参是否存在区别
		 -->
		<button>按钮[针对val()函数--有参]</button>
		<select>
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1>text()函数使用</h1>
		<button class="btn_1">按钮[针对text()函数--无参]</button>
		<button class="btn_2">按钮[针对text()函数--有参]</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		
		<script>
			//js变量【var i=1】==jq变量     var 变量名=值/元素
			//无参数 html() 函数使用
			/* var html=$("span").html();
			//BOM方式打印数据
			alert("无参数获取第一个元素内容"+html); */
			
			//有参：点击按钮--下边两个span 改为lorem lorem
			/* $("button").click(function(){
				$("span").html("<span>lorem</span>");
			}); */
			
			//动态效果：点击按钮，获取第一个表单元素的内容，将元素打印出来
			/* $("button").click(function(){
				//注意：变量名不可以为关键字
				var ipt=$("input").val();
				alert("val()函数无参"+ipt);
			}); */
			
			$("button").click(function(){
				//设置元素第一个的值  
				//1.直接设置下拉列表中value的值
				$("select").val("rem1");
				//2.给第一个值添加，设置的内容【本身存在】
				/* var rem=$("select").val();
				
				//[object Object] JavaScript中 对象的默认字符窜表示形态
				//select元素 对象 输出[object Object]
				
				//value的值：真实数据   option中值：显示数据
				//object Object  测试：无参
				alert("val()函数有参："+rem); */
			});
			
			//找到类名为btn_1的按钮--点击--弹窗内容为三个p元素[无参]
			$(".btn_1").click(function(){
				var ptext=$("p").text();
				alert(ptext);
			});
			//找到类名为btn_2的按钮--点击--lorem4/5/6改成"修改文本"[有参]
			$(".btn_2").click(function(){
				$("p").text("修改文本");
			});
		</script>
	</body>
</html>